#============================================
#知识点
# 层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# #注释
# /*单行注释*/
# /*
# 多行注释1
# 多行注释2
# 多行注释3
# */
# 通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的cs s代码也
# 会很多)
# /*这是博客园首页的css样式文件*/
# /*顶部导航条样式*/
# /*左侧菜单栏样式*/
# /*右侧菜单栏样式*/

# css的三种引入方式
# 1. style标签内部直接书写(为了教学演示方便我们用第一种)
# <style>
# h1 {
# color: bur lywood; 
# }
# </style>
# 2. link标签引入外部css文件(最正规的方式解耦合)
# <link rel="stylesheet" href= ”mycss .css ">
# 3.行内式(一般不用)
# <h1 style="color: green">老板好 要上课吗?</h1>
#============================================
# css选择器
# 基本选择器
# <style>
# /*id选择器*/
# #d1 { 找到id是d1的标签 将文本颜色变成绿黄色
#       color: greenyellow;
#      }
# /*类选择器*/
# .c1 { 找到class值 里面包含c1的标签* 
#       color: red;
#   }
# /*元素(标签)选择器*/
#span { !找到所有的span标签
#       color: red;
#      }
# /*通用选择器*/
# *{ 将html页面上所有的标签全部找到
# color: green;
# }
# </sty1e>
# ------------------------------------------
#组合选择器
#后代选择器(空格表示关系)
# div span {  div下面所有的span
#   coLor: red;
# }
#儿子选择器(>表示)
# div>span  dic低一级的span
# { 
# color: red;
# }
#毗邻选择器(+表示)
# div+span { 同级别紧挨着的下面的第个
# coLor: aqua;
# }
# 弟弟选择器(~表示)
# div~span {  同级别下面所有的span
# coLor: red;
# }
# ------------------------------------------
#属性选择器
# 1、
# [username] { 将所有 含有属性名是username的标签背景色改为红色
# background-coLor: red;
# }

# 2、
# [username= 'jason'] { 找到所有 属性名是username并且属性值是jason的标签
# coLor: orange ;
# }

# 3、
# input[username= 'jason'] { 找到所有 属性名是username并且属性值是jason的input标签
# background-coLor: wheat ;
# }
#============================================
# 分组与嵌套
# div,p,span { / *逗号表示并列关系*/
# color: yel low;
# }
# #d1, .cl,span {
# color: orange ;
#============================================
# 伪类选择器
# body {
# background-color: black;
# }
# a:link { /*访问之前的状态*/
# color: red;
# }
# a:hover { /*鼠标悬浮态*/
# color: aqua;
# }
# a:active {
# color: black; /* 鼠标点击不松开的状态激活态*/
# }

# a:visited
# color: darkgray; /* 访问之后的状态*/
# }
#============================================
# 伪元素选择器
# p:first-letter {
#   font-size: 48px;
#   color: orange ;
# }
# p:before { /*在文 本开头同css添加内容*/
#   content: ' 你说的对';
#   color: blue;
# }
# p:after {  /*在文 本结束同css添加内容*/
#   content: ' 雨露均沾';
#   color: orange ;
# ps :before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
#============================================
# 选择器优先级
# 1.选择器相同书写顺序不同
# 就近原则:谁离标签更近就听谁的
# 2.选择器不同
# 行内> id选择器
# >类选择器>标签选择器
# 精确度越高越有效
#============================================
